<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Getting the right values</title>
<style>
input{
    padding:5px;
    margin:5px;
    font-size:10px;
}

.shown{
    display:none;
}
.response{
    padding:5px;
    margin:5px;
    width:inherit;
    color:red;
    font-size:16px;
    float:left;    
}
#container{
    position:absolute;
    width:850px;
    padding:5px;
    border: 2px solid black;
    height:430px;
}
#left{    
    height:inherit;
    width:420px; 
    border-right:2px solid black;
    float:left;  
    padding:5px;
}

#right{
    height:inherit;    
    width:330px;
    float:left;
    padding:5px;
}
#bottom{
    float:left;
    bottom:5px;
    padding:5px;
}

#finalResponse{
    float:left;
    width:830px;
    height:300px;
    border:3px solid blue;
    padding:5px;
}

</style>

<script type="text/javascript">
/*
In this example, we'll learn how to access values from forms and than manipulate them.

You'll learn techniques as to how to access values from form input.
*/
var globalCounter = 0;
function submitValues(elementObj){
    alert("submitValues");
    
    alert(elementObj.name);
    var totalInputElements = document.testForm.length;
    alert("total elements: " + totalInputElements);      
    
    
    // using regular expressions here to check for digits
    var digits = /^\d+$/.test(elementObj.value);
    // using regular expressions here to check for characters which inlcudes spaces as well
    var characters =  /^[a-zA-Z\s]*$/.test(elementObj.value);
    
    alert(characters);

    // check to see if the input is empty
    if(elementObj.value==""){
        alert("input is empty");
        return false;
    }
    // input is not relevant; we need a digit for input elements with name "enterNumber"
    else if(elementObj.name == "enterNumber" && digits == false){
        alert("the input must be a digit!");
        
        return false;
    }
    // input is not relevant; we need a digit for input elements with name "enterNumber"
    else if(elementObj.name == "enterText" && characters == false){
        alert("the input must be characters only!");
        return false;
    }
    // theinput seems to have no problem, so we'll process the input
    else{
        alert("you've entered : " + elementObj.value);
        elementObj.disabled = true;
        alert(elementObj.value);
        addResponseElement(elementObj.value,elementObj.id);
        return true;
        
    }
       
}

function addResponseElement(messageValue, idName){
    alert("addResponseElement");
    globalCounter++;
    var totalInputElements = document.testForm.length;
    alert("totalInputElements");
    var container = document.getElementById('formSubmit');
    container.innerHTML += "<input type=\"text\" value=\"" +messageValue+ "\"name=\""+idName+"\" /><br>";
    if(globalCounter == totalInputElements){
        container.innerHTML += "<input type=\"submit\" value=\"Submit\" />";
    }
}

function checkForm(formObj){
    alert("checkForm");
    
    var totalInputElements = document.testFormResponse.length;
    alert(totalInputElements);
    
    
    var nameOfPerson = document.testFormResponse.nameOfPerson.value;
    alert(nameOfPerson);
    
    var birth = document.testFormResponse.birth.value;
    alert(birth);
    
    var age = document.testFormResponse.age.value;
    alert(age);
    
    var spending = document.testFormResponse.spending.value;
    alert(spending);
    
    var salary = document.testFormResponse.salary.value;
    alert(salary);
    
    var retire = document.testFormResponse.retire.value;
    alert(retire);
    
    var retirementMoney = document.testFormResponse.retirementMoney.value;
    alert(retirementMoney);
    
    var confirmedSavingsByRetirement;
    
    var ageDifference = retire - age; // how much more time can the user have to prepare for retirement
    alert(ageDifference);
    var salaryPerYear = salary * 12; // salary per year
    alert(salaryPerYear);
    var spendingPerYear = spending * 12; // salary per year
    alert(spendingPerYear);
    
    
    // income per year, can be negative
    // if negative means cannot retire
    // need to either increase spending
    // or decrease spending
    var incomeDifference = salaryPerYear - spendingPerYear;
    alert(incomeDifference);
    
    if(incomeDifference <= 0){
        buildFinalResponse(nameOfPerson,-1,-1,-1,incomeDifference);
        return true;
    }
    else{
        // income is positive, and there is chance of retirement
        confirmedSavingsByRetirement = incomeDifference * ageDifference;
        if(confirmedSavingsByRetirement <= retirementMoney){
            var shortChange = retirementMoney - confirmedSavingsByRetirement;
            alert(shortChange);
            var yearsNeeded = shortChange/12;
            buildFinalResponse(nameOfPerson,false,yearsNeeded,retire,shortChange);
            return true;
        }
        else{
            var excessMoney = confirmedSavingsByRetirement - retirementMoney;
            alert(excessMoney);
            buildFinalResponse(name,true,-1,retire,excessMoney);
            return true;
        }
    }
}

function buildFinalResponse(name,retiring,yearsNeeded,retire, shortChange){
    alert("buildFinalResponse");
    

    var element = document.getElementById("finalResponse");
    if(retiring == false){
        alert("if retiring == false");
        element.innerHTML += "<p>Hi <b>" + name + "</b>,<p>";
        element.innerHTML += "<p>We've processed your information and we have noticed a problem.<p>";
        element.innerHTML += "<p>Base on your current spending habits, you will not be able to retire by <b>" + retire + " </b> years old.</p>";
        element.innerHTML += "<p>You need to make another <b>" + shortChange + "</b> dollars before you retire inorder to acheive our goal</p>";
        element.innerHTML += "<p>You either have to increase your income or decrease your spending.<p>";
    }
    else{
        // able to retire but....
        alert("retiring == true");
        
        element.innerHTML += "<p>Hi <b>" + name + "</b>,<p>";
        element.innerHTML += "<p>We've processed your information and are pleased to announce that you will be able to retire on time.<p>";
        element.innerHTML += "<p>Base on your current spending habits, you will be able to retire by <b>" + retire + "</b> years old.</p>";
        element.innerHTML += "<p>Also, you'll have <b>" + shortChange + "</b> amount of excess cash when you retire.</p>";
        element.innerHTML += "<p>Congrats!<p>";
    }
}

</script>
</head>
<body>

<div id="container">
    <div id="left">
    <h3>Enter your information here</h3>
        <form name="testForm" >
            <input type="text" name="enterText" id="nameOfPerson" size="50"  value="Enter your name" onblur="submitValues(this);" /><br>
            <input type="text" name="enterText" id="birth" size="50"  value="Enter your place of birth" onblur="submitValues(this);" /><br>
            <input type="text" name="enterNumber" id="age" size="50" maxlength="2" value="Enter your age" onblur="submitValues(this);"/><br>
            <input type="text" name="enterNumber" id="spending" size="50" value="Enter your spending per month" onblur="submitValues(this);"/><br>
            <input type="text" name="enterNumber" id="salary" size="50" value="Enter your salary per month" onblur="submitValues(this);"/><br>
            <input type="text" name="enterNumber" id="retire" size="50" maxlength="3" value="Enter your age you wish to retire at"  onblur="submitValues(this);"/><br>
            
            <input type="text" name="enterNumber" id="retirementMoney" onblur="submitValues(this)" size="50" value="Enter the amount of money you wish to have for retirement"/><br>

        </form>
    </div>
    <div id="right">
    <h3>Response</h3>
        <form name="testFormResponse" id="formSubmit" onsubmit="checkForm(this);return false">
            
        </form>     
    </div>
    <div id="finalResponse"><h3>Final response: </h3></div>
    
</div>
</body>
</html>